<style>
    :root {
        --primary-red: #c2185b;
        --primary-blue: #1565c0;
        --primary-green: #2e7d32;
        --primary-purple: #6a1b9a;
        --primary-yellow: #f57c00;
        --primary-brown: #6d4c41;
        --light-bg: #f9f9f9;
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Noto Sans SC', 'Inter', sans-serif;
        background-color: var(--light-bg);
        color: #333;
        padding: 3rem 0;
    }

    .section-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .section-title {
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #222;
    }

    .section-desc {
        color: #666;
        max-width: 700px;
        margin: 0 auto;
    }

    .logo-section {
        margin-bottom: 5rem;
    }

    .section-subtitle {
        margin-bottom: 2.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid var(--primary-red);
        display: inline-block;
        font-weight: 600;
        color: #222;
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 2rem;
    }

    .logo-card {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: var(--card-shadow);
        transition: var(--transition);
    }

    .logo-card:hover {
        transform: translateY(-8px) scale(1.2) rotate(1deg);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
    }

    .logo-card .logo-visual {
        width: 140px;
        height: 140px;
        margin: 0 auto 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }

    /* 中文Logo样式 */
    .logo-card .chinese-character {
        font-family: 'Noto Serif SC', 'SimSun', serif;
        font-weight: 700;
        color: white;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* 背景样式 */
    .logo-card .bg-red {
        background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    }

    .logo-card .bg-blue {
        background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    }

    .logo-card .bg-green {
        background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    }

    .logo-card .bg-purple {
        background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);
    }

    .logo-card .bg-yellow {
        background: linear-gradient(135deg, #ffb74d 0%, #f57c00 100%);
    }

    .logo-card .bg-brown {
        background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
    }

    .logo-card .bg-teal {
        background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
    }

    /* 图标样式 */
    .logo-card .logo-icon {
        color: white;
        font-size: 4rem;
        transition: var(--transition);
    }

    .logo-card .logo-name {
        font-size: 1.15rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #222;
    }

    .logo-card .logo-memo {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 0;
    }

    /* 形状变化 */
    .logo-card .shape-circle {
        border-radius: 50%;
    }

    .logo-card .shape-hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .logo-card .shape-diamond {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }

    .logo-card .shape-rect {
        border-radius: 4px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {

        .logo-card .logo-visual {
            width: 110px;
            height: 110px;
        }

        .logo-card .chinese-character {
            font-size: 2.5rem !important;
        }

        .logo-card .logo-icon {
            font-size: 3rem;
        }

    }
</style>

<div class="container">
    <div class="section-header">
        <h1 class="section-title">社交网站多元Logo设计</h1>
        <p class="section-desc">展示融合中文、动植物及常见实物元素的社交平台标识设计，体现传统文化与现代社交理念的结合</p>
    </div>

    <!-- 中文元素Logo -->
    <div class="logo-section">
        <h2 class="section-subtitle">中文元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-visual bg-red shape-circle">
                    <span class="chinese-character" style="font-size: 3.5rem;">友</span>
                </div>
                <h3 class="logo-name">友伴</h3>
                <p class="logo-memo">以"友"为核心，强调友谊与陪伴</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-blue shape-rect">
                    <span class="chinese-character" style="font-size: 3rem;">言</span>
                </div>
                <h3 class="logo-name">言堂</h3>
                <p class="logo-memo">交流平台，言论自由的象征</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-green shape-hexagon">
                    <span class="chinese-character" style="font-size: 3rem;">聚</span>
                </div>
                <h3 class="logo-name">聚点</h3>
                <p class="logo-memo">兴趣聚集，人脉交汇的平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-purple shape-diamond">
                    <span class="chinese-character" style="font-size: 2.8rem;">知</span>
                </div>
                <h3 class="logo-name">知遇</h3>
                <p class="logo-memo">知识分享，遇见同好的社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-yellow shape-circle">
                    <span class="chinese-character" style="font-size: 3.2rem;">圈</span>
                </div>
                <h3 class="logo-name">圈子</h3>
                <p class="logo-memo">多元化社交圈，兴趣社群</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-teal shape-rect">
                    <span class="chinese-character" style="font-size: 3rem;">聊</span>
                </div>
                <h3 class="logo-name">闲聊</h3>
                <p class="logo-memo">轻松聊天，分享生活的空间</p>
            </div>
        </div>
    </div>

    <!-- 动物元素Logo -->
    <div class="logo-section">
        <h2 class="section-subtitle">动物元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-visual bg-blue shape-circle">
                    <i class="fas fa-dove logo-icon"></i>
                </div>
                <h3 class="logo-name">白鸽社交</h3>
                <p class="logo-memo">象征和平友好的社交环境</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-yellow shape-rect">
                    <i class="fas fa-paw logo-icon"></i>
                </div>
                <h3 class="logo-name">虎朋</h3>
                <p class="logo-memo">活力四射的朋友社交平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-green shape-hexagon">
                    <i class="fas fa-deer logo-icon"></i>
                </div>
                <h3 class="logo-name">鹿鸣</h3>
                <p class="logo-memo">文人雅士交流的社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-purple shape-diamond">
                    <i class="fas fa-butterfly logo-icon"></i>
                </div>
                <h3 class="logo-name">蝶变</h3>
                <p class="logo-memo">展现自我，蜕变成长的平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-red shape-circle">
                    <i class="fas fa-fish logo-icon"></i>
                </div>
                <h3 class="logo-name">鱼群</h3>
                <p class="logo-memo">群体社交，兴趣聚集的社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-brown shape-rect">
                    <i class="fas fa-bird logo-icon"></i>
                </div>
                <h3 class="logo-name">雀跃</h3>
                <p class="logo-memo">充满活力的年轻人社交平台</p>
            </div>
        </div>
    </div>

    <!-- 植物元素Logo -->
    <div class="logo-section">
        <h2 class="section-subtitle">植物元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-visual bg-green shape-rect">
                    <i class="fas fa-seedling logo-icon"></i>
                </div>
                <h3 class="logo-name">竹友</h3>
                <p class="logo-memo">君子之交，清雅社交平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-teal shape-circle">
                    <i class="fas fa-leaf logo-icon"></i>
                </div>
                <h3 class="logo-name">莲语</h3>
                <p class="logo-memo">纯净社交，真诚交流空间</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-red shape-diamond">
                    <i class="fas fa-pagelines logo-icon"></i>
                </div>
                <h3 class="logo-name">牡丹坊</h3>
                <p class="logo-memo">高端社交，品质生活社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-brown shape-hexagon">
                    <i class="fas fa-tree logo-icon"></i>
                </div>
                <h3 class="logo-name">松社</h3>
                <p class="logo-memo">长久友谊，稳固社交平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-purple shape-rect">
                    <i class="fas fa-flower logo-icon"></i>
                </div>
                <h3 class="logo-name">兰集</h3>
                <p class="logo-memo">文人雅集，兴趣社交社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-yellow shape-circle">
                    <i class="fas fa-apple-alt logo-icon"></i>
                </div>
                <h3 class="logo-name">桃李圈</h3>
                <p class="logo-memo">师生校友交流的社交平台</p>
            </div>
        </div>
    </div>

    <!-- 常见实物元素Logo -->
    <div class="logo-section">
        <h2 class="section-subtitle">常见实物元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-visual bg-blue shape-circle">
                    <i class="fas fa-paper-plane logo-icon"></i>
                </div>
                <h3 class="logo-name">纸鸢</h3>
                <p class="logo-memo">信息传递，连接你我的平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-purple shape-rect">
                    <i class="fas fa-lantern logo-icon"></i>
                </div>
                <h3 class="logo-name">灯语</h3>
                <p class="logo-memo">点亮社交，温暖相遇的社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-red shape-hexagon">
                    <i class="fas fa-pen-fancy logo-icon"></i>
                </div>
                <h3 class="logo-name">笔墨</h3>
                <p class="logo-memo">文字社交，思想碰撞的空间</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-green shape-diamond">
                    <i class="fas fa-bridge logo-icon"></i>
                </div>
                <h3 class="logo-name">桥连</h3>
                <p class="logo-memo">连接心灵，跨越距离的平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-yellow shape-circle">
                    <i class="fas fa-compass logo-icon"></i>
                </div>
                <h3 class="logo-name">指南</h3>
                <p class="logo-memo">发现兴趣，找到同好的社区</p>
            </div>

            <div class="logo-card">
                <div class="logo-visual bg-teal shape-rect">
                    <i class="fas fa-book-open logo-icon"></i>
                </div>
                <h3 class="logo-name">书语</h3>
                <p class="logo-memo">以书会友，知识交流的平台</p>
            </div>
        </div>
    </div>
</div>



    
